import React,{useState, useEffect} from 'react'
import Ad from 'components/Ad/index';
import classNames from 'classnames';
import SVG from 'components/SVG';
import { Popover } from 'antd';


import './index.scss'

interface IAtlaslistIcon{
    toggleList:(type:string)=>void,
    defauleIcon:string
}
interface IAtlaslist{
    classType:string,
    listData:Array<IAtlasItem>
}
interface IAtlasItem{
        img:string,
        name:string,
        schedule:number,
}
// 切换图谱排列方式
const AtlaslistIcon:React.FC<IAtlaslistIcon>=(props)=>{
    const {toggleList ,defauleIcon} = props;
    return( 
        <div className='togglelist'>
            <i onClick={()=>toggleList('menu')} 
             className={
                classNames({
                    'type_icon':true,
                    'active': defauleIcon=== 'menu'
                })
            }>
                <SVG xlinkHref='icon-shitu_gezi' ></SVG>
            </i>
            
            <i onClick={()=>toggleList('list')} 
             className={
                classNames({
                    'type_icon':true,
                    'active': defauleIcon=== 'list'
                })
            }>
                <SVG xlinkHref='icon-shitu_liebiao' ></SVG>
            </i>
        </div>
    )
}
// 图谱Item menu
const AtlasItemMenu:React.FC<IAtlasItem>=(props)=>{
    const {img,name,schedule } = props;
    return(
        <li>
            <div className='atlas-item'>
                <AtlasMenu />
                <img src={img} className='_cover' />
                <div className='_schedule-box'>
                    <span className='_schedule_num'>
                        {
                            schedule
                        }%
                    </span>
                    <i className='_schedule_article'>
                        <i className='_filling' style={{width:`${schedule>100?100:schedule<0?0:schedule}%`}}></i>
                    </i>
                </div>
            </div>
            <p className='atlas-name'>
            {
                name
            }
            </p>
        </li>
    )
}
// 图谱item list
const AtlasItemList:React.FC<IAtlasItem>=(props)=>{
    const {img,name,schedule } = props;
    return(
        <li>
            <a href="/#/myatlaslibrary" className='atlas-item-list'>
                <span className='_list_title'>
                    <img src={img} alt="" className='_list_icon'/>
                    <span>
                        {
                         name   
                        }
                    </span>
                </span>
                <span className='_list_author'>
                    {
                        name
                    }
                </span>
                <span className='_list_time'>
                    {
                        schedule
                    }
                </span>
            <AtlasMenu/>
            </a>
        </li>
    )
}
// 图谱菜单
const AtlasMenu:React.FC=()=>{
    return (
        <Popover getPopupContainer={(trigger) => trigger} content={content} title="Title" placement="bottom" trigger='hover'>
            <div className='atlas-menu'> 
                <div className='hover-pop'>
                    <SVG xlinkHref='icon-tupu_gengduo'/>
                </div>
            </div>
        </Popover>
    )
}
// 图谱列表
const Atlaslist:React.FC<IAtlaslist> = (props)=>{
    const {classType, listData} = props;
        return (
            classType==='menu'?(
            <ul  className='atlaslist-ul'>
                <li className='add-atlas'>
                    <div className='atlas-item'>
                        <span className='_add'>+</span>
                    </div>
                </li>
                {
                    listData.map((item,index)=>{
                        return <AtlasItemMenu img={item.img} name={item.name} schedule={item.schedule} key={`${item.name}-${index}`}/>
                    })
                }
            </ul>):(
                <ul className='atlaslist-ul_list'>
                    <li className='atlas-item-list atlas-item-list_head'>
                        <span className='_list_title'>图谱列表</span>
                        <span className='_list_author'>创建者</span>
                        <span className='_list_time'> 更新时间</span>
                    </li>
                    {
                        listData.map((item,index)=>{
                            return <AtlasItemList img={item.img} name={item.name} schedule={item.schedule} key={`${item.name}-${index}`}/>
                        })
                    }
                </ul>
            )
        )
}
const content = (
    <div className='atlas_menu_box'>
      <p>归档</p>
      <p>协作</p>
      <p>分组</p>
      <p className='_del'>删除</p>
    </div>
  );
// 图谱
function ItemBody() {
    const [listType,setListType] = useState<string>('menu')
    const [listData,setListData] = useState<Array<IAtlasItem>>([])
    function toggleList(type:string){
        setListType(type)
    }
    useEffect(() => {
        let list=[
            {
                img:require('../images/cover.png'),
                name:'test1',
                schedule:80,
            },
            {
                img:require('../images/cover.png'),
                name:'test2',
                schedule:10,
            },
            {
                img:require('../images/cover.png'),
                name:'test3',
                schedule:20,
            },
            {
                img:require('../images/cover.png'),
                name:'test4',
                schedule:30,
            },
            {
                img:require('../images/cover.png'),
                name:'test5',
                schedule:40,
            },
            {
                img:require('../images/cover.png'),
                name:'test6',
                schedule:50,
            },
            {
                img:require('../images/cover.png'),
                name:'test7',
                schedule:60,
            },
            {
                img:require('../images/cover.png'),
                name:'test8',
                schedule:70,
            },
            {
                img:require('../images/cover.png'),
                name:'test9',
                schedule:90,
            },
        ]
        setListData(list)
    }, [])
    return (
        <div className='atlaslist'>
            <div className='atlaslist-title'>
                <span>我的图谱库</span>
                <AtlaslistIcon toggleList={toggleList} defauleIcon={listType}/>
            </div>
            <Atlaslist classType={listType} listData={listData}/>
            <Ad />
            
        </div>
    )
}

export default ItemBody
